import { Physics } from "@react-three/cannon";
import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei";
import { Ground } from "./components/Ground";
import { Player } from "./components/Player";
import { FPV } from "./components/FPV";
import { Cubes } from "./components/Cubes";
import { CubesInfo } from "./components/CubesInfo";
import { TextureSelector } from "./components/TextureSelector";
import { Instructions } from "./components/Instructions";

function App() {
  return (
    <>
      {/*<CubesInfo></CubesInfo>*/}
      <Canvas>
        <Sky sunPosition={[100, 100, 20]}></Sky>
        <ambientLight intensity={0.5}></ambientLight>
        <FPV></FPV>
        <Physics>
          <Player></Player>
          <Cubes></Cubes>
          <Ground></Ground>
        </Physics>
      </Canvas>
      <div className="absolute centered cursor">+</div>
      <TextureSelector></TextureSelector>
      <Instructions />
    </>
  );
}

export default App;
